<template>
  <view class="app">
    <view class="top-title">希望能提供出您的宝贵意见</view>
    <view class="input-box">
      <view class="input-title">问题描述或建议</view>
      <TnInput
        type="textarea"
        v-model="inputValue"
        placeholder="请详述您要反馈的问题或事建议"
        :border="false" />
    </view>

    <view class="img-box">
      <view class="input-title"
        >上传截图
        <text style="color: #999999">（选填）</text>
      </view>
      <view style="padding: 30rpx 0 0 30rpx">
        <TnImageUpload v-model="imageList" :action="actionUrl" />
      </view>
    </view>
    <view class="phone-box">
      <view class="input-title">联系方式</view>
      <TnInput
        type="text"
        v-model="phoneValue"
        placeholder="请输入您的联系方式"
        :border="false" />
    </view>
    <view
      style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 140rpx;
      ">
      <TnButton
        :height="96"
        :width="686"
        bg-color="#0052D9"
        text-color="#FFFFFF"
        @click="subClick"
        >提交</TnButton
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { config } from "@/config";
import TnInput from "@tuniao/tnui-vue3-uniapp/components/input/src/input.vue";
import TnImageUpload from "@tuniao/tnui-vue3-uniapp/components/image-upload/src/image-upload.vue";
import TnButton from "@tuniao/tnui-vue3-uniapp/components/button/src/button.vue";
import { post } from "@/request/request";

const phoneValue = ref("");
const inputValue = ref("");
const imageList = ref([]);
const actionUrl = config.baseUrl + "/public_api/upload";

// 提交
const subClick = () => {
  if (!inputValue.value) {
    uni.showToast({
      title: "反馈内容不能为空",
      icon: "none",
      duration: 2000,
    });
    return;
  } else {
    post(
      "/public_api/save_feedback",
      {
        phone: phoneValue.value,
        content: inputValue.value,
        img: imageList.value,
      },
      { "Content-Type": "application/x-www-form-urlencoded" }
    ).then((res) => {
      console.log("反馈提交：", res);
      uni.showToast({
        title: res.message,
        icon: "success",
        duration: 2000,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    });
  }
};
</script>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .top-title {
    padding: 30rpx;
    margin-top: 20rpx;
    width: 686rpx;
    height: 112rpx;
    background: #ffffff;
    border-radius: 24rpx;
    font-size: 32rpx;
    display: flex;
    align-items: center;
  }

  .input-box {
    margin-top: 50rpx;
    height: 372rpx;
    width: 686rpx;
    background: #fff;
    border-radius: 24rpx;

    .input-title {
      padding: 30rpx 0 0 30rpx;
      font-size: 28rpx;
    }
  }

  .img-box {
    margin: 25rpx;
    width: 686rpx;
    background: #ffffff;
    border-radius: 24rpx;

    .input-title {
      padding: 30rpx 0 0 30rpx;
      font-size: 28rpx;
    }
  }

  .phone-box {
    margin-top: 50rpx;
    height: 173rpx;
    width: 686rpx;
    background: #fff;
    border-radius: 24rpx;

    .input-title {
      padding: 30rpx 0 0 30rpx;
      font-size: 28rpx;
    }
  }
}
</style>
